<template>
  <!-- 订阅消息 -->
  <div class="FlSubscribe">
    <!-- 搜索框-->
    <div style="padding: 0px 0px;">
      <!--<div style="font-weight:700;padding:10px 10px 10px 50px;">订阅消息</div>
      <div style="border-top:1px solid #E6E6E6;margin:0px 20px;"></div>-->
      <!-- @clearSearch='clearSearch' -->
      <div style="border-top:1px solid #E6E6E6;margin:0px 30px;"></div>  
      <div style="padding: 25px 30px;">
        <el-button style="margin-left:0px;" type="primary" size="mini" plain @click="update" icon="el-icon-search">订阅消息</el-button>
        <el-button  type="primary" size="mini" plain @click="deleteByUserId" icon="el-icon-search">全部取消</el-button>
      </div>
      <!-- <el-button @click="update">订阅消息</el-button>
      <el-button @click="deleteByUserId">全部取消</el-button> -->
    </div>
    <!-- 表格 -->
    <div class="out">
      <!--数据列表-->
      <!-- 字典 -->
      <dictionaries :searchData='searchData' :modelType='modelType' @optionData="dictionariesCallBack"></dictionaries>
      <el-table
              ref="multipleTable"
              :data="dataAttribute"
              v-loading.body="false"
              border
              fit
              highlight-current-row
              size="mini"
              max-height="511px"
              :cell-style="{padding:'5px 0'}"
              @selection-change="handleSelectionChange"
              
      >
        <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="45"></el-table-column>
        <el-table-column
                align="center"
                label="序号"
                type="index"
                :index="indexMethod"
                width="54"
        >
        </el-table-column>
        <el-table-column
                align="center"
                v-for="item in searchData"
                v-if="item.tableSign"
                :key="item.id"
                :label="item.CN"
                :show-overflow-tooltip="true"
                min-width="140px"
        >
          <template slot-scope="scope">{{item.type === 'select' ? optionDatas(item.typeGroupCode?optionsZi[item.EN]:searchOptionTable[item.EN],scope.row[item.EN]):scope.row[item.EN]}}</template>
        </el-table-column>
        
      </el-table>
      <el-pagination
              class="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagetotal"
      ></el-pagination>
    </div>

    <!-- 查看组件 -->
    <examine
            :DialogVisibleMod="DialogVisibleExamine"
            :modData="examineData"
            :optionsZi="optionsZi"
            :searchOptionTable="searchOptionTable"
            :attributeOrder="searchData"
            @examineDialog="examineDialog"
    ></examine>
  </div>
</template>
<script>
  //引入组件
  import {
    SearchCForL,
    searchComponents,
    buttonhurdle,
    modificationi,
    examine,
    rightButtons,
    dictionaries,
    importXlsx
  } from "@/views/components/FLPage";
  import {
    searchFlNewEvent, //分页查询
    selectByUserId,//查询这个用户订阅的消息事件
    //deleteByUserId,//全部取消
    update//订阅
  } from "@/api/admin/NewsSubscription/index";
  export default {
    components: {
      buttonhurdle,
      modificationi,
      examine,
      searchComponents,
      importXlsx,
      rightButtons,
      dictionaries
    },
    name:'FlSubscribe',
    data() {
      return {
        //importUrl:`/api/cb/flSubscribe/importXls`,
        //搜索框
        suoS: {},
        // 保存需要的arr
        saveArrs: [],
        //   搜索组件的数据
        searchData: [
          {
            EN: "id",
            CN: "",
            value: "",
            type: "input",
            option: [],
            Exp: "^.{3,20}$",
            err: "长度为3-20的所有字符!",
            result: true,
            sign: true,
            searchSign: false,
            addSign: false,
            tableSign: false,
            examineSign: true,
            examineDisabled: false,
            modificationSign: false
          },
          {
            EN: "name",
            CN: "事件名称",
            value: "",
            type: "input",
            option: [],
            Exp: "^.{3,20}$",
            err: "长度为3-20的所有字符!",
            result: true,
            sign: true,
            searchSign: false,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true
          },
          {
            EN: "label",
            CN: "事件标签",
            value: "",
            type: "select",
            typeGroupCode:'new_label',
            option: [],
            Exp: "^.{3,20}$",
            err: "长度为3-20的所有字符!",
            result: true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true
          },
          {
            EN: "eventClass",
            CN: "事件等级",
            value: "",
            type: "select",
            typeGroupCode:'new_class',
            option: [],
            Exp: "^.{3,20}$",
            err: "长度为3-20的所有字符!",
            result: true,
            sign: true,
            searchSign: true,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true
          },
          {
            EN: "type",
            CN: "提醒方式",
            value: "",
            type: "select",
            typeGroupCode:'new_type',
            option: [],
            Exp: "^.{3,20}$",
            err: "长度为3-20的所有字符!",
            result: true,
            sign: true,
            searchSign: false,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true
          },
          {
            EN: "status",
            CN: "状态",
            value: "",
            type: "select",
            typeGroupCode:'user_status',
            option: [],
            Exp: "^.{3,20}$",
            err: "长度为3-20的所有字符!",
            result: true,
            sign: true,
            searchSign: false,
            addSign: true,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: true
          },
          {
            EN: "createTime",
            CN: "创建日期",
            value: "",
            type: "date",
            option: [],
            Exp: "^.{3,20}$",
            err: "长度为3-20的所有字符!",
            result: true,
            sign: true,
            searchSign: false,
            addSign: false,
            tableSign: true,
            examineSign: true,
            examineDisabled: false,
            modificationSign: false
          },
          {
            EN: "updateTime",
            CN: "更新日期",
            value: "",
            type: "date",
            option: [],
            Exp: "^.{3,20}$",
            err: "长度为3-20的所有字符!",
            result: true,
            sign: true,
            searchSign: false,
            addSign: false,
            tableSign: false,
            examineSign: true,
            examineDisabled: false,
            modificationSign: false
          },
        ],
      //添加弹窗的数据模型
        diaDataAdd: {
          yyqName: "",
          pqName: "",
          pqNum: "",
          BH: ""
        },
        //删除----Start--------------------------------------
        deleteDataList: [],
        //删除----End----------------------------------------

        //查看----Start--------------------------------------

        //查看的弹窗控制器
        DialogVisibleExamine: false,

        //查看的数据
        examineData: {},

        //查看----End----------------------------------------

        //表格数据
        //后端传来的数据
        dataAttribute: [],
          //表格选中
          multipleSelection: [],
          //
          tableCheck:[],
          //分页
          currentPage: 1, //当前页
          pagesize: 10, //每页条数
          pagetotal: 0, //总条数,
          modelType:'table',
          optionsZi:[],
          searchOptionTable:[],
          selectByUserIdData:[]
      };
    },
    computed: {
      optionDatas(){
        return function (arr,val) {
          if (arr) {
            for (let i = 0; i < arr.length; i++) {
              if(arr[i].value == val){
                return arr[i].label;
              }
            }
          }
        }
      }
    },
    created() {
      this.forData(this.currentPage, this.pagesize, this.suoS);
      // this.getselectByUserId()
      
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // async getselectByUserId(){
      //   //请求获取第一次---查询相关的消息事件
      //   const FlNewEventArr = await searchFlNewEvent(page, size, obj);
      //   // 获取的数据存起来
      //   this.searchFlNewEvent = FlNewEventArr.data;
      //   //请求获取第第二次---查询用户对应的消息事件
      //   const selectByUserIdArr = await selectByUserId();
      //   //获取的数据存起来
      //   this.selectByUserIdData = selectByUserIdArr.data;
      //   console.log(selectByUserIdArr.data,8888888888)
      //   this.multipleSelection = selectByUserIdArr.data
      // },
      // 搜索栏清空
      // clearSearch(msg){
      //   if (msg == '清空') {
      //   console.log(msg,'父组件');
      //   this.forData(this.currentPage, this.pagesize); //刷新列表
      //   }
      // },
      // 配置
      
      configuration(msg){
        if (msg == '配置') {
          console.log(msg);
        }
      },
      // 重置
      emptySearch(msg){
        if (msg == '重置') {
          this.searchContent = undefined;
          // this.forData(this.currentPage, this.pagesize);
        }
      },
      // 字典组件回调
      dictionariesCallBack([a={}, b={}]) {
        // 正常字典
        this.optionsZi = a;
        // 跨表字典
        this.searchOptionTable = b;
        this.forData(this.currentPage, this.pagesize, this.suoS);
      },
      //搜索
      sunS_F(msg) {
        if (msg == '搜索') {
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
        }
      },
      //查询组件回调
      searchCallBack(newData) {
        let obj={};
        for(let i=0;i<newData.length;i++){
          obj[newData[i].EN]=newData[i].value;
        }
        this.suoS=obj;
      },
      //渲染数据初始
      forData(page, size, searchData) {
        searchFlNewEvent(page, size, searchData).then(response => {
          this.pagetotal = response.data.total;
          this.dataAttribute = response.data.list;
          console.log('_______________________________')
          console.log(response.data)
          // console.log(this.dataAttribute,962111)
            this.getselectByUserId();
        });
      //  this.getselectByUserId()
        
      },
      getselectByUserId(){
        selectByUserId().then(response => {
           this.multipleSelection = response.data;
            let arrs=[]
            for(let i=0;i<this.dataAttribute.length;i++){
              for(let j=0;j<this.multipleSelection.length;j++){
                if(this.dataAttribute[i].id==this.multipleSelection[j].newId){
                  arrs.push(this.dataAttribute[i])
                }
              }
            }
          
          console.log(arrs,456789)
          this.toggleSelection(arrs)
            let dataAttribute = this.dataAttribute
           console.log(this.multipleSelection,77777777)
           console.log(dataAttribute,222222)
          
        });
      },
      async update() {
        var obj = this.tableCheck;
        console.log(obj,123456);
       update(obj).then(response=>{
         this.$message({
            message: response.message,
            type: "success"
          });
       })
      },
      deleteByUserId() {
        this.tableCheck=[];
        let obj=this.tableCheck
        this.toggleSelection()
        update(obj).then(response=>{
          this.$message({
            message: "全部取消成功！",
            type: "success"
          });
       })
      },
      //添加用户--新增表单组件传来的参数
      toAdd(addData) {
        let obj = {};
        for (let i = 0; i < addData.length; i++) {
          obj[addData[i].EN] = addData[i].value;
        }
        addFlSubscribe(obj).then(response => {
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          this.$message({
            message: "添加成功",
            type: "success"
          });
        }).catch(()=>{
          this.$message.error("添加失败");
        })
      },
      //按钮栏传递了删除命令
      toDelete(orderstring) {
        this.$confirm("确认删除？").then(_ => {
          let idArr = [];
          for (let i = 0; i < this.deleteDataList.length; i++) {
            idArr.push(this.deleteDataList[i].id);
          }
          if (idArr.length == 0) {
            this.$message({
              message:'请选择要删除的数据',
              type:'warning'
            })
            return;
          }
          deleteFlSubscribe(idArr).then(response => {
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
            this.$message({
              message:'删除成功',
              type:'success'
            })
          }).catch(error => {
            this.$message({
              message:'删除失败',
              type:'warning'
            })
          });
        }).catch(_ => {});
      },
      //单项删除
      deleteList(id) {
        let arrId = [id];
        this.$confirm("确认删除？").then(_ => {
          deleteFlSubscribe(arrId).then(response => {
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
            this.$message({
              message:'删除成功',
              type:'success'
            })
          });
          done();
        }).catch(_ => {});
      },
      //查看
      makeExaId(id) {
        getFlSubscribe(id).then(response => {
          let copyDialog = true;
          this.DialogVisibleExamine = copyDialog;
          // console.log(response);
          this.examineData = response.data;
        }).catch(error => {
          alert("获取失败");
        });
      },
      //查看关闭弹窗
      examineDialog(dialogVisibleMod) {
        this.DialogVisibleExamine = false;
      },

      //修改
      modifyData(value, modData) {
        if (value) {
          let id = modData.id;
          modifyFlSubscribe(id, modData).then(response => {
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          }).catch(error => {
            this.$message({
              message:'修改失败',
              type:'warning'
            })
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          });
        } else {
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
        }
      },
      //表格选中事件
      handleSelectionChange(val) {
        this.multipleSelection = val;
        //传递删除的参数
        this.tableCheck = val;
        console.log(this.tableCheck)
      },

      //分页
      handleSizeChange(val) {
        console.log("每页 " + val + " 条");
        this.pagesize = val;
        this.forData(this.currentPage, val, this.suoS);
      },
      handleCurrentChange(val) {
        console.log("当前页: " + val);
        this.currentPage = val;
        this.forData(val, this.pagesize, this.suoS);
      },
      // 序号
      indexMethod(index){
        var currentPage = this.currentPage;
        var pagesize = this.pagesize;
        this.$nextTick(function(){
          currentPage = this.currentPage;
          pagesize = this.pagesize;
        });
        return currentPage*pagesize -pagesize +1+index
      },
      // 下载模板请求
      //exprotXlsx: exprotXls,
      //downloadFile: downTem
      //工具栏组件传来的参数
      // FTableFunction(attributeOrderCloneTwiceL) {
      //   this.attributeOrder = attributeOrderCloneTwiceL;
      // },
    }
  };
</script>
<style scoped src="@/styles/allCssP.css"></style>
<style lang="scss" scoped>
  .FlSubscribe{
    .shrinkBox{
      text-align: center;
      font-weight: 700;
      font-size: 20px;  
      height: 25px;
      // border-bottom:1px solid #E6E6E6;
    }
    /deep/ .el-table--mini{
      .gutter{
        display: table-cell!important;
      }
      .el-checkbox__inner{
        width: 12px;
        height: 12px;
      }
      // 改变表头的高度  改为45px
      /deep/.el-table__header-wrapper{
        .el-table__header{
          .has-gutter{
            tr{
              th{
                padding: 5px 0 !important;
                height: 34px;
                line-height: 34px;
              }
            }
          }
        }
      }
      // 表头操作固定定位
      /deep/.el-table__fixed-right{
        .el-table__header{
          thead{
            tr{
              th{
                padding: 5px 0 !important;
                height: 34px;
                line-height: 34px;
              }
            }
          }
        }

      }
      .el-table__body-wrapper{
        .el-table__header .has-gutter tr,
          .el-table__header .has-gutter th {
            padding: 0;
            height: 43px;
        }
        .el-table__body tr,
          .el-table__body td {
            padding: 0;
            height: 43px;
        }
      }
    }
    .right_row{
      display: flex;
      // justify-content: start;
      align-items: center;
      position: relative;
      
      .buttons{
        position: absolute;
        padding: 0px !important;
        right: 30px;
      }
      .buttonhurdle{
        padding: 0px !important;

      }
    }
    .do{
      display: flex;
    }
    .pagination{
      text-align: left;
      margin-top: 20px;
    }
  }
</style>
